<?$this->_extends("_layouts/index_layout");?>

<?$this->_block("contents");?>

<script>
	$(function(){
	    $("img[class^='ep']").mouseover(function(){
	        $('embed').remove(); 
	        $('body').append('<embed src="<?=$_BASE_DIR?>images/btn.mp3" autostart="true" hidden="true" loop="false">');
	 		$("img[class^='ep']").each(function(){
	 			$(this).css('width','120px');
	 			$(this).css('margin-top','25px');
	 			$(this).css('margin-left','25px');
	 			$(this).css('margin-right','25px');
	 			$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'.jpg')
	 		});
	 		$(this).css('width','170px');
	 		$(this).css('margin-top','0');
	 		$(this).css('margin-left','0');
	 		$(this).css('margin-right','0');
	 		$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'b.jpg');
	    });
	    $("img[class^='ep']").mouseout(function(){
	    	$(this).css('width','120px');
	 		$(this).css('margin-top','25px');
	 		$(this).css('margin-left','25px');
	 		$(this).css('margin-right','25px');
	 		$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'.jpg')
	    });
	});
</script>
	<div id="main30" style="width:954px;" >
		<ul class="ep" >
			<li><a href="#" ><img class='ep1' src='<?=$_BASE_DIR?>images/ep1.jpg'/></a></li>
			<li><a href="#" ><img class='ep2' src='<?=$_BASE_DIR?>images/ep2.jpg'/></a></li>
			<li><a href="#" ><img class='ep3' src='<?=$_BASE_DIR?>images/ep3.jpg'/></a></li>
			<li><a href="#" ><img class='ep4' src='<?=$_BASE_DIR?>images/ep4.jpg'/></a></li>
			<li><a href="#" ><img class='ep5' src='<?=$_BASE_DIR?>images/ep5.jpg'/></a></li>
		</ul>
	</div>
	<div class="cls"></div>
<?$this->_endblock();?>
